<template>
  <div v-if="!addEditFun.entryEdit" class="page-manage-page">
    <div class="content">
      <div class="head">
        <span>标识:</span>
        <a-input v-model:value="searchFun.searchInfo.name" style="width: 120px; margin: 0 15px"></a-input>
        <!--                <div v-if="searchFun.openStat">-->
        <span>名称:</span>
        <a-input v-model:value="searchFun.searchInfo.label" style="width: 120px; margin: 0 15px"></a-input>
        <!--                </div>-->
        <a-button type="primary" @click="searchFun.searchClick">
          <search-outlined />
          查询
        </a-button>
        <a-button style="margin: 0 15px" @click="searchFun.reset">重置</a-button>
      </div>
      <div class="middle">
        <div style="display: flex; justify-content: space-between; width: 100%; margin-bottom: 10px">
          <div>
            <a-button type="primary" @click="cli_add">
              <PlusOutlined />
              新增
            </a-button>
          </div>
          <div>
            <a-button
              v-if="!layoutswitch"
              style="display: flex; align-items: center"
              @click="layoutswitch = !layoutswitch"
            >
              <svg
                t="1668060573119"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5155"
                width="15"
                height="15"
              >
                <path
                  d="M288 32v224c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM656.4 32v224c0 17.7-14.3 32-32 32H400.4c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM1024.4 32v224c0 17.7-14.3 32-32 32H768.4c-17.7 0-32-14.3-32-32V32c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM288 400v224c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32V400c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM656.4 400v224c0 17.7-14.3 32-32 32H400.4c-17.7 0-32-14.3-32-32V400c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM1024.4 400v224c0 17.7-14.3 32-32 32H768.4c-17.7 0-32-14.3-32-32V400c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM288 768v224c0 17.7-14.3 32-32 32h-224c-17.7 0-32-14.3-32-32V768c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM656.4 768v224c0 17.7-14.3 32-32 32H400.4c-17.7 0-32-14.3-32-32V768c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32zM1024.4 768v224c0 17.7-14.3 32-32 32H768.4c-17.7 0-32-14.3-32-32V768c0-17.7 14.3-32 32-32h224c17.7 0 32 14.3 32 32z"
                  p-id="5156"
                ></path>
              </svg>
              <span>表格</span>
            </a-button>
            <a-button v-else style="display: flex; align-items: center" @click="layoutswitch = !layoutswitch">
              <svg
                t="1668060920052"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="5688"
                width="15"
                height="15"
              >
                <path
                  d="M380.928 67.584q26.624 0 45.568 18.944t18.944 45.568l0 256q0 26.624-18.944 45.568t-45.568 18.944l-256 0q-26.624 0-45.056-18.944t-18.432-45.568l0-256q0-26.624 18.432-45.568t45.056-18.944l256 0zM380.928 580.608q26.624 0 45.568 18.432t18.944 45.056l0 256q0 26.624-18.944 45.568t-45.568 18.944l-256 0q-26.624 0-45.056-18.944t-18.432-45.568l0-256q0-26.624 18.432-45.056t45.056-18.432l256 0zM893.952 67.584q26.624 0 45.056 18.944t18.432 45.568l0 256q0 26.624-18.432 45.568t-45.056 18.944l-256 0q-26.624 0-45.568-18.944t-18.944-45.568l0-256q0-26.624 18.944-45.568t45.568-18.944l256 0zM893.952 580.608q26.624 0 45.056 18.432t18.432 45.056l0 256q0 26.624-18.432 45.568t-45.056 18.944l-256 0q-26.624 0-45.568-18.944t-18.944-45.568l0-256q0-26.624 18.944-45.056t45.568-18.432l256 0z"
                  p-id="5689"
                ></path>
              </svg>
              <span>卡片</span>
            </a-button>
          </div>
        </div>
        <div v-show="layoutswitch" class="permission-page-table">
          <a-table
            :columns="columns"
            :data-source="tableData"
            :pagination="false"
            :loading="tableLoading"
            :scroll="{ y: tableHeight }"
          >
            <template #bodyCell="{ column, record, index }">
              <template v-if="column.key === 'option'">
                <div style="display: flex; align-items: center">
                  <!--                  <a-button type="link" @click="cli_edit(index)">编辑</a-button>-->
                  <!--                  <a-button type="link" danger @click="cli_delete(index)">删除</a-button>-->
                  <a-button type="link" @click="cli_detial(index)">详情</a-button>
                  <linkButton
                    :record-or-index="index"
                    :use-item="2"
                    @cli-edit="cli_edit"
                    @cli-delete="cli_delete"
                  ></linkButton>
                </div>
              </template>
              <template v-if="column.key === 'url'">
                <div style="width: 50px; height: 33px">
                  <img style="width: 100%; height: 100%" :src="record.url" alt="" />
                </div>
              </template>
            </template>
          </a-table>
        </div>
        <div v-show="!layoutswitch" class="home-layoutManage">
          <!--布局模板, 缩放 300*200-->
          <div style="height: calc(100% - 7px)">
            <div style="display: flex; flex-wrap: wrap; height: calc(100% - 10px); overflow: auto">
              <div
                v-for="(item1, index1) in menuList"
                :key="item1.id"
                class="menu"
                @mouseenter="mouseenter"
                @mouseleave="mouseleave"
              >
                <div class="menu-sub">
                  <img style="width: 100%; height: 100%" :src="item1.url" alt="" />
                  <!--编辑与删除按钮-->
                  <div style="position: absolute; right: 10px; bottom: 10px; display: none">
                    <a-button type="primary" danger @click="cli_delete(index1)">删除</a-button>
                    <a-button style="margin-left: 10px" @click="cli_edit(index1)">编辑</a-button>
                    <a-button style="margin-left: 10px" @click="cli_detial(index)">详情</a-button>
                  </div>
                </div>
                <div>
                  <div>
                    <span style="font-weight: bolder">{{ '名称: ' }}</span>
                    {{ item1.label }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="foot">
        <a-pagination
          v-model:current="pagFun.pagInfo.pageNo"
          show-quick-jumper
          :total="pagFun.pagInfo.total"
          :responsive="false"
          @change="pagFun.onChange"
        />
      </div>
    </div>
    <addDrawer
      :is-show-edit="addEditFun.isShowEdit"
      :menu-list="menuList"
      :current-index="addEditFun.currentIndex"
      :oldmodel-ref="addEditFun.modelRef"
      :is-detl="addEditFun.isShowDetail"
      :reshow-edit="addEditFun.reshowEdit"
      @close-edit="closeEdit"
      @click-entr-edit="evt_clickEntrEdit"
      @save-page-success="savePageSuccess"
    ></addDrawer>
    <a-modal v-model:visible="deleteFun.isDelete" title="删除" @ok="delete_ok">
      {{ `确认删除 ${menuList[deleteFun.del_idx].label} 吗 ?` }}
    </a-modal>
  </div>
  <designpage v-else :menu-list="addEditFun.modelRef" @quit-edit="quitEdit"></designpage>
</template>

<script setup>
import { computed, ref, defineEmits, watch, reactive, nextTick, onMounted } from 'vue'
import factory from './factory'
import addDrawer from './components/addDeleteDrawer'
import designpage from './home/designpage'
import { PlusOutlined, AppstoreOutlined, DatabaseOutlined, DownOutlined, UpOutlined } from '@ant-design/icons-vue'
import linkButton from '@/components/linkButton'

const menuList = ref([])
//==分页功能==========
const pagFun = reactive({
  pagInfo: { pageNo: 1, pageSize: 10, total: 10 },
  onChange: (page, pageSize) => {
    pagFun.pagInfo.pageNo = page
    pagFun.pagInfo.pageSize = pageSize
    getAllPage()
  },
})
const tableLoading = ref(false)
const getAllPage = (post = pagFun.pagInfo) => {
  tableLoading.value = true
  factory.getAllPage(post).then((res) => {
    tableLoading.value = false
    menuList.value = res.data.dataList
    pagFun.pagInfo.total = Number(res.data.totalCount)
  })
}
getAllPage()

/** 切换模式  **/
const layoutswitch = ref(true)

//==表格================
const columns = ref([
  {
    title: '操作',
    key: 'option',
    width: 140,
  },
  {
    title: '标识',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '名称',
    dataIndex: 'label',
    key: 'label',
  },
  {
    title: '允许用户自定义',
    dataIndex: 'customized',
    key: 'customized',
    width: 150,
  },
  {
    title: '缩略图',
    dataIndex: 'url',
    key: 'url',
    width: 100,
  },
  {
    title: '更新人',
    dataIndex: 'modifierName',
    key: 'modifierName',
  },
  {
    title: '更新时间',
    dataIndex: 'modifyTime',
    key: 'modifyTime',
  },
])
const tableData = computed(() => {
  let arr = menuList.value
  return arr
})

//自适应高度
const tableHeight = ref(360)
onMounted(() => {
  let ele = document.getElementsByClassName('page-manage-page')
  tableHeight.value = ele[0].offsetHeight - 217
})

//==新增与编辑============
const addEditFun = reactive({
  isShowEdit: false,
  currentIndex: -1,
  entryEdit: false,
  modelRef: {},
  isShowDetail: false,
  reshowEdit: false,
})
const cli_edit = (index) => {
  addEditFun.isShowDetail = false
  addEditFun.isShowEdit = true
  addEditFun.reshowEdit = false
  addEditFun.currentIndex = index
}
const cli_add = () => {
  addEditFun.isShowDetail = false
  addEditFun.isShowEdit = true
  addEditFun.reshowEdit = false
  addEditFun.currentIndex = -1
}

//==详情页==================
const cli_detial = (index) => {
  addEditFun.isShowDetail = true
  addEditFun.isShowEdit = true
  addEditFun.reshowEdit = false
  addEditFun.currentIndex = index
}
const closeEdit = () => {
  addEditFun.isShowEdit = false
}
const evt_clickEntrEdit = (modelRef) => {
  //增加页面
  addEditFun.entryEdit = true
  addEditFun.modelRef = modelRef
  console.log('页面管理-进入设计', modelRef)
}
const quitEdit = () => {
  addEditFun.entryEdit = false
  addEditFun.isShowEdit = false
  addEditFun.reshowEdit = true
  nextTick(() => {
    addEditFun.isShowEdit = true
  })
}
const savePageSuccess = () => {
  getAllPage()
}

//==删除============
const deleteFun = reactive({
  isDelete: false,
  del_idx: -1,
})
const cli_delete = (idx) => {
  deleteFun.isDelete = true
  deleteFun.del_idx = idx
}
const delete_ok = () => {
  factory.delPort(menuList.value[deleteFun.del_idx].id).then((res) => {
    deleteFun.isDelete = false
  })
}

/**鼠标移入移出*************************/
const mouseenter = (e) => {
  e.path[0].children[0].children[1].style.display = 'inherit'
}
const mouseleave = (e) => {
  e.path[0].children[0].children[1].style.display = 'none'
}
/***查询功能************************/
const searchFun = reactive({
  searchInfo: { name: '', label: '' },
  openStat: true,
  searchClick: () => {
    pagFun.pagInfo.pageNo = 1
    let pagInfo = pagFun.pagInfo
    let post = { pageNo: pagInfo.pageNo, pageSize: pagInfo.pageSize, ...searchFun.searchInfo }
    getAllPage(post)
  },
  reset: () => {
    searchFun.searchInfo = { name: '', label: '' }
  },
  open: () => {
    searchFun.openStat = !searchFun.openStat
  },
})
</script>

<style lang="less" scoped>
.manage-pageManage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100% - 95px);
  overflow: auto;
  user-select: none;

  .icon-plus {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
}

.icon-plus {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.page-manage-page {
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: #f5f8f9;

  .content {
    height: calc(100% - 0px);
    padding: 15px;
    background-color: white;

    .head {
      display: flex;
      font-size: 14px;
      line-height: 32px;
    }

    .middle {
      height: calc(100% - 88px);
      margin: 15px 0;

      .home-layoutManage {
        height: calc(100% - 10px);

        .menu {
          margin: 0 10px 20px 0;

          .menu-sub {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
            border: 1px solid black;
          }
        }
      }
    }

    .foot {
      display: flex;
      justify-content: right;
    }
  }
}
</style>
<style lang="less">
.page-manage-page {
  .permission-page-table {
    .ant-tabs {
      padding: 0 !important;
    }

    .ant-btn-link {
      padding: 0 5px !important;
    }
  }
}
</style>
